WWL.scrollbox = function ( name )
{
	var scrollbox = new WWL ( 'scrollbox', name );

	scrollbox._support_transitions = liwe.utils.supports ( "transition" );

	scrollbox._event_names = []; // 'over', 'out', 'btn_up', 'btn_down', 'click', 'dblclick', 'blur' ];
	//init vars for loop method
	scrollbox._handler = null;	// setInterval id
	scrollbox._is_loop = false;	// loop is started
	scrollbox._event_loop = false;	// loop is initialized
	scrollbox._mouse = false;	// mouseOver event has been fired
	scrollbox._loop_time = 5000;	// default loop time. It is overwritten by function argument if passed

	scrollbox.cbacks [ 'render' ] = function ( sbox ) { 
		scrollbox._set_content ();

		var cnt = $( scrollbox.id );

		if ( scrollbox._support_transitions )
		{
			if ( ! cnt._has_events )
			{
				cnt.addEventListener ( "transitionend", scrollbox._remove_child, false );
				cnt.addEventListener ( "webkitTransitionEnd", scrollbox._remove_child, false );
				cnt._has_events = true;
			}
		}
	
	};

	scrollbox.cbacks [ 'click' ] = null;  // Invoked when the user clicks on an item
					      // cback: function ( scrollbox, element )

	scrollbox._remove_child = function ( evt )
	{
		var cnt = $( scrollbox.id );

		cnt.style.MozTransition = "";
		cnt.style.WebkitTransition = "";
		cnt.style.Transition = "";

		if ( cnt._remove_last )
			cnt.removeChild ( cnt.lastChild );
		else
			cnt.removeChild ( cnt.firstChild );

		cnt.style.left = - ( scrollbox.item_width ) + "px";

		cnt._remove_last = false;

		if ( cnt._transition_cback ) cnt._transition_cback ();
		cnt._transition_cback = null;

		scrollbox._in_transition = false;
	};

	scrollbox.clear = function ()
	{
		// List of items inside scrollbox
		scrollbox._items = [ -1 ];
		scrollbox._reference = [];

		// Current start position
		scrollbox._start = 0;

		scrollbox.width = 400;
		scrollbox.height = 100;

		scrollbox.item_width = 100;
		scrollbox.item_height = 100;
	};

	scrollbox.set_size = function ( w, h )
	{
		scrollbox.width = w;
		scrollbox.height = h;
	};

	scrollbox.set_item_size = function ( w, h )
	{
		scrollbox.item_width = w;
		scrollbox.item_height = h;
	};

	scrollbox.add_item = function ( item )
	{
		var ref = null, html = item;
		if ( typeof ( item ) == 'object' )
		{
			html = item.get ( 'html', '' );
			ref = item.get ( 'ref', '' );
		}
		scrollbox._items.push ( html );
		scrollbox._reference [ scrollbox._items.length - 1 ] = ref;
	};

	scrollbox.to_string = function ()
	{
		var s = new String.buffer ();

		scrollbox.items_to_show =  Math.floor ( scrollbox.width / scrollbox.item_width ) ;// - 1;

		s.add ( '<div class="wwl_' + scrollbox.type + '" style="width: ' + scrollbox.width + 'px; height: ' + scrollbox.height + 'px">' );
		s.add ( scrollbox._render_container () );
                s.add ( '</div>' );

		return s.toString ();
	};

	scrollbox._render_container = function ()
	{
		var s = new String.buffer ();

		var container_width = ( scrollbox.items_to_show + 2 ) * scrollbox.item_width;

		s.add ( String.formatDict ( WWL.scrollbox.templates [ 'container-start' ], { 
			"container_width" : container_width + scrollbox.item_width * 2,
			"left" :  - scrollbox.item_width,
			"id" : scrollbox.id,
			"height" : scrollbox.item_height
				} ) );

		s.add ( WWL.scrollbox.templates [ 'container-end' ] );

		return s.toString ();
	};

	scrollbox._set_content = function ()
	{
		if ( ! $( scrollbox.id ) ) return;
		var t, l = scrollbox._items.length;
		var item, el;
		var first = null;
		
		for ( t = 0; t < scrollbox.items_to_show + 2; t ++ )
		{
			el = scrollbox._create_element ( scrollbox._start + t );
			if ( t == 1  ) first = el;

			$( scrollbox.id ).appendChild ( el );
		}

		scrollbox._active_item = 0;
		scrollbox._click_event ( null, first );
	};

	scrollbox.move_prev = function ()
	{
		var cnt = $( scrollbox.id );
		var el;

		if ( scrollbox._in_transition ) return;


		if ( scrollbox._active_el._pos > 1 ) 
		{
			scrollbox._click_event ( null, scrollbox._active_el.previousSibling );
		};

		if ( ! scrollbox.can_move_prev () ) return

		scrollbox._in_transition = true;

		scrollbox._start -= 1;
		el = scrollbox._create_element ( scrollbox._start );

		cnt._transition_cback = function ()
		{
			cnt.insertBefore ( el, cnt.firstChild );
		};

		cnt._remove_last = true;
		scrollbox._set_transition ( cnt );
		cnt.style.left = "0px";

		if ( ! scrollbox._support_transitions ) scrollbox._remove_child ();
	};

	scrollbox.can_move_prev = function ()
	{
		return ! ( scrollbox._start == 0 );
	};

	scrollbox.can_move_next = function ()
	{
		// console.debug ( "Start: %s, to_show: %s - len: %s", scrollbox._start, scrollbox.items_to_show, scrollbox._items.length );
		return ! ( scrollbox._start + scrollbox.items_to_show + 1  >= scrollbox._items.length );
	};

	scrollbox.move_next = function ()
	{
		var cnt = $( scrollbox.id );
		if ( ! cnt ) return;
		var el;

		if ( scrollbox._in_transition ) return;

		if ( scrollbox._active_el._pos < scrollbox._items.length-1 ) 
		{
			scrollbox._click_event ( null, scrollbox._active_el.nextSibling );
		};


		if ( ! scrollbox.can_move_next () ) return ;

		scrollbox._in_transition = true;
		scrollbox._start += 1;

		el = scrollbox._create_element ( scrollbox._start + scrollbox.items_to_show + 1 );
		$( scrollbox.id ).appendChild ( el );

		scrollbox._set_transition ( cnt );
		cnt.style.left = - ( scrollbox.item_width * 2 ) + "px";

		if ( ! scrollbox._support_transitions ) scrollbox._remove_child ();
	};

	scrollbox._set_transition = function ( cnt )
	{
		cnt.style.MozTransition = "left 0.5s ease-in";
		cnt.style.WebkitTransition = "left 0.5s ease-in";
		cnt.style.Transition = "left 0.5s ease-in";
	};

	scrollbox._create_element = function ( pos )
	{
		var item = scrollbox._items [ pos ];
		var ref = scrollbox._reference [ pos ];

		if ( ! item ) item = "";
		
		el = document.createElement ( 'div' );
		el.className = "wwl_scrollbox_item";
		el.style.width = scrollbox.item_width +"px";
		el._pos = pos;
		el._ref = ref;
		
		//add event on click
		liwe.events.add ( el , 'click', function ( ev ) { scrollbox._click_event ( ev, this );} );
				
		el.style.height = scrollbox.item_height + "px";
		el.innerHTML = item;

		return el;
	};

	scrollbox.get_reference = function ( pos ) { return scrollbox._reference [ pos ]; };
	scrollbox.get_item = function ( pos ) { return scrollbox._items [ pos ]; };
	scrollbox.set_item = function ( pos, html ) 
	{ 
		var ref = null, html = item;
		if ( typeof ( item ) == 'object' )
		{
			html = item.get ( 'htmml', '' );
			ref = item.get ( 'ref', '' );
		}
		scrollbox._items [ pos ] = html; 
		scrollbox._reference [ pos ] = ref;
	};

	scrollbox.clear ();

	scrollbox._click_event = function ( ev, el )
	{
		if ( scrollbox._active_el ) liwe.dom.del_class ( scrollbox._active_el, 'active' );
		scrollbox._active_el = el;		
		liwe.dom.add_class ( el, 'active' );

		if ( scrollbox.cbacks [ 'click' ] ) scrollbox.cbacks [ 'click' ] ( scrollbox, el );
	}

	scrollbox._loop_init = function ( timing, cnt_div )
	{
		cnt_div = $el( cnt_div );
		
		var area = ( cnt_div ) ? cnt_div : $el( scrollbox._dest_id );

		scrollbox._loop_time = timing;
	
		liwe.events.add ( area, 'mouseout', function () 
			{ 
				scrollbox._mouse = false;
				if ( scrollbox._is_loop == true ) return;
				setTimeout ( function ()
					{
						scrollbox.loop ( timing, cnt_div ); 
					}, timing );
			} ); 
		
		liwe.events.add ( area, 'mouseover', function () 
					{ 
						//console.warn ( "\nSCROLLBOX ( mouseover ) : _is_loop = %s\n" , scrollbox._is_loop );
						scrollbox._mouse = true;
						scrollbox.loop_stop (); 
					} ); 

		scrollbox._event_loop = true;
	};
	//testing only
	//scrollbox._intlst = [];
	scrollbox.loop_stop = function ()
	{
		if ( ! scrollbox._is_loop || ! scrollbox._handler ) return;

		window.clearInterval ( scrollbox._handler );
		//console.warn ( "\nSCROLLBOX: loop stopped  %s id = %s\n" , scrollbox.name, scrollbox._handler );
		scrollbox._handler = null;
		scrollbox._is_loop = false;
	};

	scrollbox.loop = function ( timing, cnt_div )
	{
		//deprecated
		if ( timing == 'stop' ) { scrollbox.loop_stop (); return; }
		
		//scrollbox._mouse avoids starting loop multiple times when mouse moves while mouseover event is true	
		if ( ! scrollbox._is_loop && scrollbox._rendered && ! scrollbox._mouse )
		{
			//console.warn ( "\n\nSCROLLBOX: _is_loop = %s, scrollbox = %o\n" , scrollbox._is_loop, scrollbox );
			scrollbox._is_loop = true;
			//if timing is not defined then it will use the default value or last used
			if ( ! timing ) timing = scrollbox._loop_time;

			scrollbox._handler = window.setInterval ( scrollbox.loop, timing );
			//scrollbox._intlst.push ( scrollbox._handler );
			//console.warn ( "\nSCROLLBOX: loop setInterval %s ids = %o\n" , scrollbox.name, scrollbox._intlst );
			if ( ! scrollbox._event_loop )
				scrollbox._loop_init ( timing, cnt_div );
		}

		var active = scrollbox._active_el;
		//out if not active element is defined or loop is stopped 
		if ( ! active || ! scrollbox._is_loop ) return;
		var items = scrollbox._items;
		var tmp, els;

		if ( active._pos == items.length -1 ) 
		{
			scrollbox._start = 0;
			$( scrollbox.id , '' );
			scrollbox._set_content ();
			return;
		}
		
		scrollbox.move_next ();
	};

	return scrollbox;
};

WWL.scrollbox.get_instance = function ( instance_name )
{
	return WWL.get_instance ( "scrollbox", instance_name );
};
